<template>
  <li>
    <div class="left">
      <input type="checkbox" :checked="todo.done" @change="update(todo.id)" />
      <span v-del="todo.done">{{ todo.name }}</span>
      <span class="time" v-del="todo.done">{{ todo.time }}</span>
    </div>
    <div class="right">
      <button @click="delete1(todo.id)" v-del="todo.done">删除</button>
    </div>
  </li>
</template>

<script>
export default {
  name: "todo-mainitem",
  props: ["todo"],
  methods: {
    //点击单选按钮
    update(id) {
      //执行父元素的checkTodo方法
      this.$bus.$emit("checkDone", id);
    },
    //点击删除按钮
    delete1(id) {
      //执行父元素的deleteTodo方法
      this.$bus.$emit("deletetodo", id);
    },
  },
  //自定义指令
  directives: {
    del(el, binding) {
      //给button内的文字动态添加删除线
      binding.value ? (el.style.textDecoration = "line-through") : el.style.textDecoration = "none";
    },
  },
};
</script>

<style scoped>
li {
  height: 30px;
  border: 1px solid #000;
  cursor: pointer;
  line-height: 30px;
  margin-bottom: 4px;
  border-radius: 4px;
}
button {
  display: none;
  height: 30px;
}
li:hover button {
  display: block;
}
.left {
  float: left;
  width: 250px;
}
.right {
  float: right;
}
.time {
  font-size: 10px;
  float: right;
}
</style>